<template>
  <div>
    <view-box>
      <x-header slot="header" :left-options="{showBack: true,preventGoBack:true}"
                @on-click-back="goBack" theme="" class="queryHeader">责任列表
      </x-header>
      <group>
        <swipeout>
          <swipeout-item transition-mode="follow" v-for="(list , index) in currentInsurances" :key="index">
            <div slot="right-menu">
              <swipeout-button @click.native="swipeModify(index)" type="primary" style="background-color: #b2b2b2">修改
              </swipeout-button>
              <swipeout-button @click.native="swipeDelete(index)" type="warn">删除</swipeout-button>
            </div>
            <div slot="content" class="demo-content vux-1px-t">
              <div>
                <cell
                  :title="list.dutyName"
                  is-link
                  :border-intent="false"
                  :arrow-direction="currentIndex === index+9999 ? 'up' : 'down'"
                  @click.native="openContent(index)">
                  <i slot="icon" class="iconfont icon-createtask_fill" style="color:#4A90E2;padding-right: 5px;"></i>
                </cell>
                <template v-if="currentIndex === index+9999">
                  <cell v-if="list.amnt !==''" :value="list.amnt" title="保险金额（元）"></cell>
                  <cell v-if="list.disableAsstandard !== ''" :value="list.disableAsstandard" title="残疾评定标准"></cell>
                  <cell v-if="list.industryPaymentProp !== ''" :value="list.industryPaymentProp" title="行标赔付比例"></cell>
                  <cell v-if="list.jobPaymentProp !== ''" :value="list.jobPaymentProp" title="工标赔付比例"></cell>
                  <cell v-if="list.deductible !== ''" :value="list.deductible" title="免赔额（元）"></cell>
                  <cell v-if="list.deductibleRate !== ''" :value="list.deductibleRate" title="赔付比例"></cell>
                  <cell v-if="list.deductibleDats !== ''" :value="list.deductibleDats" title="免赔天数"></cell>
                  <cell v-if="list.standardPremium !== ''" :value="list.standardPremium" title="建议保费（元/人）"></cell>
                  <cell v-if="list.currentPremium !== ''" :value="list.currentPremium" title="当前保费（元/人）"></cell>
                </template>
              </div>
            </div>
          </swipeout-item>
        </swipeout>
      </group>
      <box gap="10px 10px">
        <x-button type="primary" class="positiveBtn" @click.native="addInsurances">添加
        </x-button>
      </box>
      <popup v-model="showToast" position="top" :show-mask="false">
        <div class="position-vertical-demo">
          {{toastTxt}}
        </div>
      </popup>
    </view-box>
  </div>
</template>
<script>
  import {XHeader, Group, Cell, Popup, Swipeout, SwipeoutItem, SwipeoutButton, Box, XButton, ViewBox} from 'Vux'
  export default {
    components: {
      XHeader, Group, Cell, Popup, Swipeout, SwipeoutItem, SwipeoutButton, Box, XButton, ViewBox
    },
    data(){
      return {
        ios: true,
        currentIndex: 1,
        showToast: false,
        toastTxt: "",
        currentInsurances: [],
        showContent: true,
        duties: [
          {
            lists: [0, 5, 6],
            value: "601001",
            text: "团体意外身故"
          },
          {
            lists: [0, 1, 5, 6],
            value: "601002",
            text: "团体意外伤残"
          },
          {
            lists: [0, 2, 3, 5, 6],
            value: "602001",
            text: "附加团体意外伤害医疗"
          },
          {
            lists: [0, 4, 5, 6],
            value: "603001",
            text: "团体意外住院补贴"
          }
        ]
      }
    },
    //监听popup
    watch: {
      showToast (val) {
        if (val) {
          setTimeout(() => {
            this.showToast = false
          }, 1500)
        }
      }
    },
    methods: {
      //唤起toast提示
      vuxToast(info){
        this.showToast = true;
        this.toastTxt = info;
      },
      //侧滑操作//修改
      swipeModify(index){
        let duties = this.duties;
        for (let i = 0; i < duties.length; i++) {
          if (this.currentInsurances[index].dutyCode === duties[i].value) {
            let obj = {
              removeIndex: index,
              removedDuty: duties[i]
            };
            this.$store.commit('SAVE_CURRENT_MODIFY_DUTY', this.currentInsurances[index]);
            this.$store.commit('REMOVE_SOME_INSURANCE', obj);
            break
          }
        }
        this.currentInsurances = this.$store.state.app.currentInsurances;
        this.$router.push('/addInsurances');
        this.$store.commit('CHANGE_TRANSITION', 'left')
      },
      //删除
      swipeDelete(index){
        let duties = this.duties;
        let thus = this;
        this.$vux.confirm.show({
          theme: thus.ios ? 'ios' : 'android',
          title: '提示',
          content: '删除此条责任信息',
          confirmText: '确定',
          cancelText: '取消',
          onCancel () {
            thus.$vux.confirm.hide()
          },
          onConfirm () {
            for (let i = 0; i < duties.length; i++) {
              if (thus.currentInsurances[index].dutyCode === duties[i].value) {
                let obj = {
                  removeIndex: index,
                  removedDuty: duties[i]
                };
                thus.$store.commit('REMOVE_SOME_INSURANCE', obj);
                return
              }
            }
            thus.vuxToast('删除成功！');
            thus.currentInsurances = thus.$store.state.app.currentInsurances;
          }
        })
      },
      //返回方案信息页面
      goBack(){
        let flag = false;
        if (this.currentInsurances.length === 0) {
          this.$router.push('/addScheme');
          this.$store.commit('CHANGE_TRANSITION', 'right')
        } else {
          for (let i = 0; i < this.currentInsurances.length; i++) {
            if (this.currentInsurances[i].dutyCode === "601001") {
              flag = true
            }
          }
          if (flag) {
            this.$router.push('/addScheme');
            this.$store.commit('CHANGE_TRANSITION', 'right')
          } else {
            this.$vux.alert.show({
              title: '温馨提示',
              content: '请添加意外身故责任',
              onHide () {
                this.addInsurances()
              }
            })
          }
        }
      },
      //View页面添加险种
      addInsurances(){
        if (this.$store.state.app.currentDuties.length === 0) {
          this.vuxToast('目前只支持四种责任录入')
        } else {
          this.$router.push('/addInsurances');
          this.$store.commit('CHANGE_TRANSITION', 'left')
        }
      },
      //点击展开项目
      openContent(index){
        if (index + 9999 === this.currentIndex) {
          this.currentIndex = (index + 9999) * (-1)
        } else {
          this.currentIndex = index + 9999
        }
      }
    },
    mounted(){
      this.ios = this.$store.state.app.ios;
      this.currentInsurances = this.$store.state.app.currentInsurances;
    }
  }
</script>
